<template>
  <div :class="`tw-libselects x${_uid}`">
    <label v-if="title" class="tw-libselects-label">{{title}}:</label>
    <div class="tw-libselects-data">
      <el-select
        :class="{xerror: errText}"
        :multiple="multiple"
        :size="size"
        value-key="value"
        :placeholder="placeholder"
        :filterable="filterable"
        :multiple-limit="parseInt(multiplelimit)"
        v-model="val"
        @change="changeValue"
        @blur="blurValue"
        :clearable="clearable"
        :collapse-tags="collapsetags"
        :disabled="valdisabled"
        :default-first-option="defaultfirst"
        :autocomplete="autocomplete"
        :no-match-text="nomatchtext"
        :no-data-text="nodatatext"
        :popper-class="`xselect${_uid}`"
        @visible-change="handleVisibleChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled">
        </el-option>
      </el-select>
      <div v-if="validValue && errText" class="tw-validinput-err">{{errText}}</div>
    </div>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'libselect',

  props,

  data() {
    return {
      val: '',
      valdisabled: false,
      errText: ''
    }
  },

  methods: {
    changeValue (value) {
      if (this.validData('change')) {
        this.$emit('input', value)
        this.$emit('change', value)
      }
    },
    blurValue () {
      this.validData('blur')
    },
    validData (now) {
      let vm = this
      let errText = ''

      if (this.validValue && this.validRules.length > 0) {
        this.validRules.forEach((itm) => {
          let trigger = itm.trigger || 'blur'
          if (now === trigger) {
            if (itm.required !== undefined && itm.required && !vm.val) {
              errText = itm.message
            }
          }
        })
      }

      vm.errText = errText
      return !errText
    },

    setStyle () {
      let style = `
        .tw-libselects.x${this._uid} .el-select .el-input__inner {
          color: ${this.color};
          background-color: ${this.bgColor};
          border-color: ${this.borderColor};
        }

        .tw-libselects.x${this._uid} .el-select .el-input .el-select__caret {
          color: ${this.borderColor};
        }

        .el-select-dropdown.el-popper.xselect${this._uid} {
          background-color: ${this.dropdownBgColor};
          border-color: ${this.dropdownBorderColor};
        }

        .el-select-dropdown.el-popper.xselect${this._uid}[x-placement^=bottom] .popper__arrow {
          border-bottom-color: ${this.dropdownBorderColor};
        }

        .el-popper.xselect${this._uid}[x-placement^=bottom] .popper__arrow::after {
          border-bottom-color: ${this.dropdownBgColor};
        }

        .el-popper.xselect${this._uid} .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
          color: ${this.dropdownItemHoverTextColor};
          background-color: ${this.dropdownItemHoverBg};
        }

        .x${this._uid} .tw-libselects-label {
          width: ${this.labelWidth};
          line-height: ${this.titleHeight};
          font-weight: ${this.titleWeight};
        }
      `

      if (this.validValue) {
        style += `
          .x${this._uid} .tw-libselects-label::before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
          }

          .x${this._uid} .el-select.xerror .el-input__inner {
            border-color: #f56c6c;
          }
        `
      }

      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    },
    disValue () {
      this.valdisabled = this.disabled
      if (this.validRules.length > 0) {
        this.validRules.forEach((itm) => {
          if (itm.disabled !== undefined && itm.disabled) {
            this.valdisabled = itm.disabled
          }
        })
      }
    }
  },

  computed: {
    style () {
      return {
        color: this.color,
        bgColor: this.bgColor,
        borderColor: this.borderColor,
        dropdownBgColor: this.dropdownBgColor,
        dropdownBorderColor: this.dropdownBorderColor,
        dropdownItemHoverBg: this.dropdownItemHoverBg,
        dropdownItemHoverTextColor: this.dropdownItemHoverTextColor
      }
    }
  },

  created () {
    this.val = this.value
  },

  mounted () {
    this.setStyle()
    this.disValue()
  },

  watch: {
    value () {
      this.val = this.value
    },
    validRules: {
      deep: true,
      handler () {
        this.disValue()
      }
    },
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
